<template>
  <view>
    <view class="subject-list">
      <view class="subject-item" v-for="item in subjectList" :key="item.id">
        <view class="flex align-center">
          <view class="flex-1 flex align-center">
            <image style="width:36rpx;height:36rpx;" :src="item.icon" mode="aspectFit"></image>
            <u-text margin="0 0 0 10rpx" :text="item.name" size="32rpx" color="#333333"></u-text>
          </view>
          <view class="flex align-center">
            <u-icon name="/static/icon/icon-input-homework.png" size="24rpx" color="#999999"></u-icon>
            <u-text margin="0 0 0 6rpx" text="作业条录入" size="24rpx" color="#999999"
              @click="toInputHomework(item.id)"></u-text>
          </view>
        </view>
        <view>
          <view class="homework-item" v-for="(item, index) in item.content" :key="index">
            <u-text :text="`【${index + 1}】 ${item.title}`" size="28rpx" color="#333"></u-text>
            <u-icon size="32rpx" name="checkmark" v-if="item.status"></u-icon>
          </view>
        </view>
        <view class="flex justify-end">
          <view class="btn-detail" @click="toDetail(item.name, item.id)">查看详情</view>
          <view class="btn-confirm" @click="toDetail(item.name, item.id)">确认上传</view>
        </view>
      </view>
    </view>
    <u-calendar :show="showCalendar" :showTitle="false" color="#FFA40C" :minDate="getMinDate()"
      :defaultDate="[calendarDate]" monthNum="6" @confirm="confirmCalendar" @close="showCalendar = false"></u-calendar>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs'
const calendarDate = ref('');
const showCalendar = ref(false);
const subjectList = ref([
  {
    id: 2,
    name: '语文',
    icon: '/static/image/img-chinese.png',
    content: [
      {
        title: '写一篇看图说话。如图',
        status: true
      },
      {
        title: '订正默写36页',
        status: false
      },
      {
        title: '读第18页',
        status: false
      }
    ]
  },
  {
    id: 1,
    name: '数学',
    icon: '/static/image/img-math.png',
    content: [
      {
        title: '计算',
        status: false
      },
      {
        title: '应用题',
        status: false
      }
    ]
  },
  {
    id: 3,
    name: '英语',
    icon: '/static/image/img-english.png',
    content: [
      {
        title: '听写单词',
        status: false
      },
      {
        title: '背诵课文',
        status: false
      }
    ]
  },
  {
    id: 4,
    name: '其它',
    icon: '/static/image/img-other.png',
    content: [
      {
        title: '写一篇看图说话。如图',
      },
      {
        title: '订正默写36页',
      }
    ]
  }
]);

onLoad(() => {
  calendarDate.value = dayjs().format('YYYY-MM-DD')
})
const toDetail = (name, id) => {
  uni.navigateTo({
    url: `/pages/common/homework/detail?name=${name}&id=${id}`
  });
};

const confirmCalendar = (date) => {
  calendarDate.value = date[0];
  showCalendar.value = false;
};

const toInputHomework = (id) => {
  uni.navigateTo({
    url: `/pages/common/homework/add?id=${id}`
  });
};

// 昨天
const getYestoday = () => {
  console.log('昨天')
  calendarDate.value = dayjs(calendarDate.value).subtract(1, 'day').format('YYYY-MM-DD')
}

// 明天
const getNextDay = () => {
  console.log('明天')
  calendarDate.value = dayjs(calendarDate.value).add(1, 'day').format('YYYY-MM-DD')
}

const getMinDate = () => {
  return dayjs().subtract(5, 'month').format('YYYY-MM-DD')
}
</script>

<style>
.subject-item {
  background: white;
  border-radius: 32rpx;
  padding: 30rpx;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: 20rpx;
}

.homework-item {
  background: #F7F7F7;
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-detail {
  width: 160rpx;
  height: 54rpx;
  background: #eee;
  border-radius: 27rpx;
  color: #333;
  margin-top: 20rpx;
  text-align: center;
  line-height: 54rpx;
  font-size: 28rpx;
}

.btn-confirm {
  width: 160rpx;
  height: 54rpx;
  background: #EBF3FF;
  border-radius: 27rpx;
  color: #0060E6;
  margin-top: 20rpx;
  text-align: center;
  line-height: 54rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
}
</style>